/**
 * Created by Administrator on 2017/9/3.
 */
/**
 * 聊天区域Dom层管理
 */
define(function (require) {
    function execute() {


        var chatHandler = require("chatHandler"),
            messageBlockDiv = document.getElementById("message-block"),
            lastMessage = null;

        chatHandler.on("send-message", function (data) {
            var personMessage = document.createElement("DIV");
            //     personMessageInfo = document.createElement("DIV"),
            //     personMessageContent = document.createElement("DIV"),
            //     portrait = document.createElement("IMG"),
            //     name = document.createElement("SPAN");
            // personMessage.classList.add("person-message");
            // personMessageInfo.classList.add("person-message__info");
            // personMessageContent.classList.add("person-message__content");
            // portrait.src = "image/portrait.png";
            // portrait.classList.add("portrait");
            // name.innerText = data.name;
            // personMessageContent.innerText = data.data;
            // personMessageInfo.appendChild(portrait);
            // personMessageInfo.appendChild(name);
            // personMessage.appendChild(personMessageInfo);
            // personMessage.appendChild(personMessageContent);

            personMessage.classList.add("person-message");
            personMessage.innerHTML = '<div class="person-message__info">' +
                '<img src="image/portrait.png" class="portrait">' +
                '<span class="name">' + data.name + '</span></div>' +
                '<div class="person-message__content">' + data.data + '</div>';

            messageBlockDiv.appendChild(personMessage);

        });
        chatHandler.on("chat-open", function () {
            messageBlockDiv.innerHTML +=
                '<div class="system-message">' +
                '<div class="system-message__content">' +
                '<p>已关闭实时讨论</p>' +
                '<p>请在上方开启</p>' +
                '</div>' +
                '</div>';
        });
        chatHandler.on("chat-closed", function () {
            console.log("Im here")
            messageBlockDiv.innerHTML +=
                '<div class="system-message">' +
                '<div class="system-message__content">' +
                '<p>已开启实时讨论</p>' +
                '</div>' +
                '</div>';
        });

        var move = new (function () {
            var offset;
            var watchingDelay = 2000,
                timeStart = new Date();
            this.moveToEnd = function () {
                if (messageBlockDiv.lastElementChild==null) return;
                offset = messageBlockDiv.lastElementChild.offsetLeft + messageBlockDiv.lastElementChild.offsetWidth - messageBlockDiv.parentNode.offsetWidth;
                if (offset < 0) offset = 0;
                messageBlockDiv.style.right = (offset >= 0 ? offset : 0) + 'px';
            };
            this.moveBack = function (steps) {
                offset -= steps;
                if (offset < 0) offset = 0;
                messageBlockDiv.style.right = offset + 'px';

                timeStart = new Date();
            };
            this.moveForward = function (steps) {
                if (messageBlockDiv.lastElementChild==null) return;
                offset += steps;
                var boundrary = messageBlockDiv.lastElementChild.offsetLeft + messageBlockDiv.lastElementChild.offsetWidth - messageBlockDiv.parentNode.offsetWidth;
                if (offset > boundrary) offset = boundrary;
                console.log(offset,boundrary)
                messageBlockDiv.style.right = offset + 'px';

                timeStart = new Date();
            };

            // 更新offset
            setInterval(function () {
                if (new Date() - timeStart < watchingDelay) return;
                timeStart = new Date();
                move.moveToEnd();
            }, 500);
        })();
        var arrowLeft = document.getElementById("arrow-left"),
            arrowRight = document.getElementById("arrow-right"),
            steps = messageBlockDiv.parentNode.offsetWidth / 4;
        arrowRight.addEventListener("click", move.moveForward.bind(null, steps));
        arrowLeft.addEventListener("click", move.moveBack.bind(null, steps));


    }

    return {
        execute: execute
    }
})